JavaScript eloquente: Un'introduzione moderna alla programmazione: Passaggio ai grafici ad alte prestazioni

Nella grafica al computer, distinguiamo tra Vettoriale e Raster grafici. I grafici vettoriali (come SVG) descrivono le immagini tramite forme logiche; ogni elemento è un oggetto persistente nel DOM. Al contrario, i grafici raster (come HTML5 Canvas) lavorano con raster di punti colorati.

1. Il passaggio a Canvas

Mentre SVG è più facile da stiliare con CSS, il browser deve tenere traccia di ogni nodo. Per esigenze ad alte prestazioni, come giochi con migliaia di elementi in movimento, l'API Canvas è superiore. Fornisce un singolo elemento DOM che incapsula una superficie di disegno — essenzialmente una "tela bianca".

2. Il contesto di disegno

Il <canvas> elemento è una "scatola nera" finché non inizializziamo il suo contesto. I metodi di questo oggetto forniscono l'interfaccia effettiva per il disegno, separando l'elemento visualizzato dalla logica di rendering.

var context = canvas.getContext("2d");

3. Consapevolezza dello spazio dei nomi

Nei grafici basati su XML come SVG, l'attributo xmlns="http://www.w3.org/2000/svg" è critico. Segnala al browser di passare dall'analisi standard del HTML allo schema grafico specifico, consentendo alle etichette delle forme di essere riconosciute come oggetti interattivi.

TERMINALbash — 80x24

> Ready. Click "Run" to execute.

QUESTION 1

What is the primary difference between Vector and Bitmap graphics?

Vector uses pixel data; Bitmap uses logical shapes.

Vector uses logical shape descriptions; Bitmap uses a grid of colored dots.

Vector is always faster for game rendering.

Bitmap elements remain persistent in the DOM.

QUESTION 2

What is the purpose of the xmlns attribute in an SVG tag?

To define the width and height of the viewport.

To link an external CSS stylesheet.

To change the element to a different XML namespace for specific schema recognition.

To enable hardware acceleration for bitmap rendering.

QUESTION 3

How do you access the drawing interface for an HTML5 Canvas?

By modifying the .style.color property of the canvas.

By calling the getContext('2d') method on the canvas element.

By inserting SVG tags inside the <canvas> tags.

By using the document.draw() global function.

QUESTION 4

Why does a dashboard with 10,000 data points run faster on Canvas than SVG?

Canvas uses fewer DOM nodes, reducing browser tracking overhead.

Canvas allows for better CSS styling of individual bars.

SVG cannot handle color hex codes.

Canvas automatically deletes old frames.

QUESTION 5

Once a shape is drawn to a Canvas, what happens to its 'identity'?

It can be selected and moved via standard DOM queries.

It is stored as a persistent object in the browser memory.

It becomes part of the pixel raster and loses its individual identity.

It is automatically converted to an SVG path.